<template>
    <div class="app-container pull-height">
        <el-container>
            <el-header>
                <div style="display: flex;justify-content: flex-start;">
                    <el-button type="text" @click="addGoodsAdd()" v-if="role === 'manager' || (sid === '6' &&  (end === 'm' || end === 'w') )">新增</el-button>
                    <el-button type="text" @click="pullGoodsPull" v-if="role === 'manager' || (sid === '6' &&  (end === 'm' || end === 'w') )">推广</el-button>
                    <div class="div01">
                        <el-form :inline="true" :model="findGoods" ref="findGoods" class="demo-form-inline">
                            <el-form-item label="商品编号:">
                                <el-input v-model="findGoods.goodsNumber" placeholder="商品编号"></el-input>
                            </el-form-item>
                            <el-form-item label="物料:">
                                <el-select v-model="findGoods.meteriType" placeholder="请选择物料">
                                    <el-option v-for="item in baseVO.materials" :key="item.type" :label="item.type"
                                        :value="item.type">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="品类:">
                                <el-select v-model="findGoods.categoryType" placeholder="请选择品类">
                                    <el-option v-for="item in baseVO.categories" :key="item.type" :label="item.type"
                                        :value="item.type">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="findGoodsSubmit">查询</el-button>
                                <el-button @click="resetForm('findGoods')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-header>
            <el-main>

                <!-- 商品表格展示 -->
                <el-table ref="multipleTable" :data="goodsList" height="500" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px"
                                :src="'http://localhost:8092/' + scope.row.picture">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="goodsName" label="商品名">
                    </el-table-column>
                    <el-table-column prop="goodsNumber" label="商品编号">
                    </el-table-column>
                    <el-table-column prop="meteriType" label="材质">
                    </el-table-column>
                    <el-table-column prop="weight" label="重量">
                    </el-table-column>
                    <el-table-column label="产品线">
                        <template slot-scope="scope">{{ scope.row.area }}{{ scope.row.producter }}</template>
                    </el-table-column>
                    <el-table-column prop="categoryType" label="品类" width="70px">
                    </el-table-column>
                    <el-table-column prop="unitPrice" label="单价" v-if="role === 'manager' || (sid === '6' &&  (end === 'm' || end === 'w') )">
                    </el-table-column>
                    <el-table-column label="状态" >
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.status == 0">上架</el-tag>
                            <el-tag type="warning" v-if="scope.row.status == 2">下架</el-tag>
                            <el-tag type="warning" v-if="scope.row.status == 3">待定价</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="time" label="日期" :formatter="formatDate">
                        <!-- <template slot-scope="scope">{{ scope.row.time}}</template> -->
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" 
                                @click="updateGoods(scope.$index, scope.row.id)" v-if="role === 'manager' || (sid === '6' &&  (end === 'm' || end === 'w') )">编辑</el-button><br>
                            <el-button size="mini" type="danger"
                                @click="handleDelete(scope.$index, scope.row.id)" v-if="role === 'manager' || (sid === '6' &&  (end === 'm' || end === 'w') )">删除</el-button><br>
                            <el-button size="mini" type="warning" v-if="scope.row.status == 0 && (role === 'manager' || (sid === '6' &&  (end === 'm' || end === 'w')))"
                                @click="updateById01(scope.$index, scope.row.id)" >去下架</el-button>
                            <el-button size="mini" type="success" v-if="scope.row.status == 2 && (role === 'manager' || (sid === '6' &&  (end === 'm' || end === 'w')))"
                                @click="updateById(scope.$index, scope.row.id)">去上架</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>

                <el-dialog title="新增" :visible.sync="dialogFormVisible">
                    <div>
                        <el-upload class="upload-demo" action="http://localhost:8092/goods/upload"
                            :on-preview="handlePreview" :on-remove="handleRemove" :on-success="uploadFileHandler"
                            :on-error="uploadFileErrorHandler" :on-progress="uploadFileOnProgressHandler"
                            v-model="allfileList" :file-list="fileList">
                            <el-button size="small" type="primary">点击上传商品图片</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </div>
                    <el-form label-width="80px" :model="addGoods">
                        <el-form-item label="商品名:">
                            <el-input v-model="addGoods.goodsName" placeholder="商品名"></el-input>
                        </el-form-item>
                        <el-form-item label="重量:">
                            <el-input v-model="addGoods.weight" placeholder="重量"></el-input>
                        </el-form-item>
                        <el-form-item label="物料:">
                            <el-select v-model="addGoods.meteriType" placeholder="请选择物料" @change="change_material()">
                                <el-option v-for="item in baseVO.materials" :key="item.type" :label="item.type"
                                    :value="item.type">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="成色:">
                            <el-select v-model="addGoods.purity" placeholder="请选择成色">
                                <el-option v-for="item in purities" :key="item.purity" :label="item.purity"
                                    :value="item.purity">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="区域:">
                            <el-select v-model="addGoods.area" placeholder="请选择区域" @change="change_area()">
                                <el-option v-for="item in baseVO.areas" :key="item.area" :label="item.area"
                                    :value="item.area">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="产线:">
                            <el-select v-model="addGoods.producter" placeholder="请选择产线">
                                <el-option v-for="item in productLines" :key="item.producter" :label="item.producter"
                                    :value="item.producter">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="品类:">
                            <el-select v-model="addGoods.categoryType" placeholder="请选择品类">
                                <el-option v-for="item in baseVO.categories" :key="item.type" :label="item.type"
                                    :value="item.type">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="addGoodsCencal">取 消</el-button>
                        <el-button type="primary" @click="addGoodsAffirm">确 定</el-button>
                    </div>
                </el-dialog>

                <el-dialog title="修改" :visible.sync="dialogFormVisible01">
                    <div>
                        <el-upload class="upload-demo" action="http://localhost:8092/goods/upload"
                            :on-preview="handlePreview" :on-remove="handleRemove" :on-success="uploadFileHandler01"
                            :on-error="uploadFileErrorHandler" :on-progress="uploadFileOnProgressHandler"
                            v-model="allfileList" :file-list="fileList">
                            <el-button size="small" type="primary">点击上传商品图片</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </div>
                    <el-form label-width="80px" :model="goods">
                        <el-form-item label="商品名:">
                            <el-input v-model="goods.goodsName" placeholder="商品名"></el-input>
                        </el-form-item>
                        <el-form-item label="重量:">
                            <el-input v-model="goods.weight" placeholder="重量"></el-input>
                        </el-form-item>
                        <el-form-item label="物料:">
                            <el-select v-model="goods.meteriType" placeholder="请选择物料" @change="change_material01()">
                                <el-option v-for="item in baseVO.materials" :key="item.type" :label="item.type"
                                    :value="item.type">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="成色:">
                            <el-select v-model="goods.purity" placeholder="请选择成色">
                                <el-option v-for="item in purities" :key="item.purity" :label="item.purity"
                                    :value="item.purity">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="区域:">
                            <el-select v-model="goods.area" placeholder="请选择区域" @change="change_area01()">
                                <el-option v-for="item in baseVO.areas" :key="item.area" :label="item.area"
                                    :value="item.area">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="产线:">
                            <el-select v-model="goods.producter" placeholder="请选择产线">
                                <el-option v-for="item in productLines" :key="item.producter" :label="item.producter"
                                    :value="item.producter">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="品类:">
                            <el-select v-model="goods.categoryType" placeholder="请选择品类">
                                <el-option v-for="item in baseVO.categories" :key="item.type" :label="item.type"
                                    :value="item.type">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible01 = false">取 消</el-button>
                        <el-button type="primary" @click="updateGoodsAffirm">确 定</el-button>
                    </div>
                </el-dialog>

                <el-dialog title="推广" :visible.sync="dialogFormVisible02">
                    <el-form :model="form02">
                        <el-form-item label="客户">
                            <el-select v-model="form02.id" placeholder="请选择">
                                <el-option v-for="item in clientAndSumMoney" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="pullGoodsCancel">取 消</el-button>
                        <el-button type="primary" @click="pullGoodsAffirm">确 定</el-button>
                    </div>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import Base from "../base/base.vue"
export default {
    components: {
        Base
    },
    data() {
        return {
            currentPage: 1,//当前页
            pageSize: 10,//每页大小
            totalPage: 1,//总页数
            total: 1,
            goodsList: [],
            multipleSelection: [],
            findGoods: {},//条件查询
            goods: {},//修改前查询
            addGoods: {},//新增
            form01: {},//修改
            form02: {},//推广
            dialogFormVisible: false,//新增
            dialogFormVisible01: false,//修改
            dialogFormVisible02: false,//推广
            //上传图片
            fileList: [],//图片上传
            allfileList: [],
            loading: null,
            url: "",
            srcList: [],
            marriage: null,
            occupation: null,
            //基础信息
            baseVO: {},
            area: "",//地区
            productLine: "",//产线
            productLines: [],
            material: "",//材质
            purity: "",//成色
            purities: [],
            category: "",//品类
            //客户及其交易额
            clientAndSumMoney: [],
            pullGoodsList: [],
            goodsList01:[],
            //user信息
            userAll:{},
            role:"",
            sid:"",
            end:"",
        }
    },
    mounted: function () {
        // 发送请求查状态不等于1的商品
        this.findGoodsFind()
        //查询基础信息
        this.find()
        //根据用户名获取所有用户信息
       this.$axios.get("/user/findUserByAccount/" + window.localStorage.getItem("account")).then(res => {
            console.log("用户信息");
        console.log(res.data);
        this.userAll = res.data.data;
        this.role = res.data.data.roleList[0].name;
        console.log(this.role);
        this.sid = res.data.data.sid
        console.log(this.sid);
        let a = this.role.length
        this.end = this.role.substring(a-1,a)
        console.log(this.end);
      });

    },
    methods: {
       
        formatDate(row, column) {
          // 获取单元格数据
          let data = row[column.property]
          if(data == null) {
              return null
          }
          let dt = new Date(data)
          return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
        },
        //打开推广对话框
        pullGoodsPull: function () {
            this.dialogFormVisible02 = true
            this.$axios.get("businessCompetitor/getName").then(res => {
                console.log("客户及其交易额");
                console.log(res.data);
                this.clientAndSumMoney = res.data.data
            })
        },
        //取消推广
        pullGoodsCancel: function(){
            this.dialogFormVisible02 = false
            this.form02 = {}
        },
        //推广提交
        pullGoodsAffirm: function () {

            if (this.multipleSelection == undefined || this.multipleSelection.length <= 0) {
                this.$message('请选择推荐商品');
                return
            } else {
                for (let index = 0; index < this.multipleSelection.length; index++) {
                    const element = this.multipleSelection[index];
                    let a = {goodsId:element.id,beFerrerId:this.form02.id}
                    this.pullGoodsList.push(a)
                }
                console.log("推广提交数据");
                console.log(this.pullGoodsList);
                
                this.$axios.post("pull/addPull",this.pullGoodsList).then(res => {
                    if (res.data.data = true) {
                    this.$message.success("推广成功");
                    this.form02 = {}
                } else {
                    this.$message.error("推广失败");
                }
                })
                this.dialogFormVisible02 = false
            }

        },
        findGoodsFind: function () {
            let a = {
                currentPage: this.currentPage,
                size: this.pageSize
            }
            // 发送请求查状态不等于1的商品
            this.$axios.post("goods/selectPage01", a).then(res => {
                console.log(res.data);
                // 保存菜单
                this.goodsList = res.data.data.records
                this.currentPage = res.data.data.current
                this.pageSize = res.data.data.size
                this.total = res.data.data.total
                this.totalPage = res.data.data.pages
            })
        },

        //条件查询
        findGoodsSubmit: function () {
            this.findGoods.currentPage = this.currentPage
            this.findGoods.size = this.pageSize
            // 发送请求查状态不等于1的商品
            this.$axios.post("goods/selectPageByCobdition01", this.findGoods).then(res => {
                console.log("条件查询");
                console.log(res.data);
                // 保存菜单
                this.goodsList = res.data.data.records
                this.currentPage = res.data.data.current
                this.pageSize = res.data.data.size
                this.total = res.data.data.total
                this.totalPage = res.data.data.pages
            })
        },
        //清空查询
        resetForm(findGoods) {
            this.findGoods = {}

        },
        //取消修改
        updateGoodsCancel: function () {
            this.goods = {}
            this.baseVO = {}
            this.srcList = []//清空上传图片
            this.dialogFormVisible01 = false
        },
        //修改提交
        updateGoodsAffirm: function () {
            this.$axios.post("goods/updateGoods", this.goods).then(res => {
                if (res.data.data = true) {
                    this.$message.success("修改成功");
                    this.findGoodsFind()
                } else {
                    this.$message.error("修改失败");
                }
            })
            this.goods = {}
            this.baseVO = {}
            this.srcList = []//清空上传图片
            this.dialogFormVisible01 = false
        },
        addGoodsCencal: function () {
            this.addGoods = {}
            this.baseVO = {}
            this.dialogFormVisible = false
        },
        //新增提交
        addGoodsAffirm: function () {
            this.$axios.post("goods/addGoods", this.addGoods).then(res => {
                if (res.data.data = true) {
                    this.$message.success("添加成功");
                    this.findGoodsFind()
                } else {
                    this.$message.error("添加失败");
                }
            })
            this.addGoods = {}//清空新增商品信息
            this.baseVO = {}//清空基础信息
            this.srcList = []//清空上传图片
            this.dialogFormVisible = false
            //新增刷新
            // 发送请求查状态不等于1的商品


        },
        //打开修改窗口并查询
        updateGoods: function (index, id) {
            //查询基础信息
            this.find()
            this.dialogFormVisible01 = true
            //查询当前行产品信息
            this.$axios.get("goods/findById/" + id).then(res => {
                console.log("当前行");
                console.log(res.data);
                this.goods = res.data.data
            })
        },
        //查询基础信息
        addGoodsAdd: function () {
            this.dialogFormVisible = true
            this.find()
        },
        //查询基础信息
        find: function () {
            this.$axios.get("/base/allBase").then(res => {
                this.baseVO = res.data.data;

            })
        },
        //
        //新增选择材质
        change_material: function () {
            this.purities = ""
            for (const item of this.baseVO.materials) {
                if (this.addGoods.meteriType == item.type) {
                    this.purities = item.purities
                    return
                }
            }
        },
        //修改选择材质
        change_material01: function () {
            this.purities = ""
            for (const item of this.baseVO.materials) {
                if (this.goods.meteriType == item.type) {
                    this.purities = item.purities
                    return
                }
            }
        },
        //新增选择区域
        change_area: function () {
            this.productLine = ""
            //
            for (const item of this.baseVO.areas) {
                if (this.addGoods.area == item.area) {
                    this.productLines = item.productLines
                    return
                }
            }
        },
        //修改选择区域
        change_area01: function () {
            this.productLine = ""
            //
            for (const item of this.baseVO.areas) {
                if (this.goods.area == item.area) {
                    this.productLines = item.productLines
                    return
                }
            }
        },
        //多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //改变每页大小
        handleSizeChange(val) {
            this.pageSize = val
            if (this.findGoods == null) {
                this.findGoodsFind()
            } else {
                this.findGoodsSubmit()
            }

        },
        //改变当前页
        handleCurrentChange(val) {
            this.currentPage = val
            if (this.findGoods == null) {
                this.findGoodsFind()
            } else {
                this.findGoodsSubmit()
            }
        },
        //去上架
        updateById: function (index, id) {
            this.$axios.get("goods/updateById/" + id).then(res => {
                if (res.data.data == true) {
                    this.goodsList[index].status = 0
                }
            })
        },
        //去下架
        updateById01: function (index, id) {
            this.$axios.get("goods/updateById01/" + id).then(res => {
                if (res.data.data == true) {
                    this.goodsList[index].status = 2

                }
            })
        },
        //删除
        handleDelete: function (index, id) {
            this.$axios.get("goods/deleteById/" + id).then(res => {
                if (res.data.data == true) {
                    this.goodsList.splice(index, 1)
                }
            })
        },
        // ----------------修改上传图片
        uploadFileHandler01(res) {
            console.log(res)
            setTimeout(() => {
                this.srcList.push(res.data)
                console.log(this.srcList);
                this.url = res.data;
                this.loading.close();
                if (res.code == 201) {
                    this.$message.error(res.msg)
                } else {
                    this.$message.success(res.msg)
                }
                this.goods.picture = this.srcList[0]
            }, 500);
        },
        // ----------------新增上传图片
        uploadFileHandler(res) {
            console.log(res)
            setTimeout(() => {
                this.srcList.push(res.data)
                console.log(this.srcList);
                this.url = res.data;
                this.loading.close();
                if (res.code == 201) {
                    this.$message.error(res.msg)
                } else {
                    this.$message.success(res.msg)
                }
                this.addGoods.picture = this.srcList[0]
            }, 500);
        },
        uploadFileErrorHandler(res) {
            this.$message.error("上传失败,请检查网络连接")
        },
        uploadFileOnProgressHandler(res) {
            // this.$message("上传中...")
            this.fullScreenLoading()
        },
        fullScreenLoading() {
            this.loading = this.$loading({
                lock: true,
                text: '文件上传中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
        },
        handleRemove(file, fileList) {
            this.srcList.forEach(function (item, index, arr) {
                if (item == file.response.data) {
                    arr.splice(index, 1);
                }
            });
            console.log(this.srcList);
        },
        handlePreview(file) {
            console.log(file);
        },

    }
}
</script>
<style scope>
.el-header {
    margin-top: 10px;
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 30%;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 70%;
}

.div01 {
    position: relative;
    left: 50px;
    top: 10px;
}
</style>